{% load i18n %}
{% load static %}
{% load simpletags %}

{% if cl.search_fields or cl.has_filters %}
  <script type="text/javascript">
    function preSubmit() {
      $('#changelist-search').find("input[name!='']").each(function () {
        if ($(this).val() === '') {
          $(this).removeAttr('name');
        }
      });
    }
  </script>

  {% autoescape off %}
    {% load_dates %}
  {% endautoescape %}

  <!-- search_form.html -->
  <div id="toolbar">
    <form id="changelist-search" method="get" onsubmit="preSubmit(this)">
      <input type="hidden" name="p" value=""/>
      <el-row :gutter="10" class="simpleui-form" style="flex-wrap:wrap;">
        {% if cl.search_fields %}
          <el-col :span="8">
            <el-input class="simpleui-form-item"
                      size="small"
                      clearable
                      name="{{ search_var }}"
                      :placeholder="placeholder"
                      prefix-icon="el-icon-search"
                      v-model="searchInput"
                      @keyup.enter.native="formSubmit()">
            </el-input>
          </el-col>
        {% endif %}

        {% if cl.has_filters %}
          {% for spec in cl.filter_specs %}
            {% if spec|get_date_type == 'date' or spec|get_date_type == 'datetime' %}
              <el-col :span="8">
                <el-date-picker class="simpleui-form-item"
                                size="small"
                                v-model="{{ spec.field.name }}"
                                @change="change{{ spec|get_date_type|capfirst }}"
                                type="{{ spec|get_date_type }}range"
                                start-placeholder="{{ spec.title }}"
                                end-placeholder="{{ spec.title }}">
                </el-date-picker>
              </el-col>
              <input type="hidden" v-model="{{ spec.field_generic }}gte" name="{{ spec.field_generic }}gte"/>
              <input type="hidden" v-model="{{ spec.field_generic }}lt" name="{{ spec.field_generic }}lt"/>
            {% elif spec|has_filter %}
              <el-select class="simpleui-form-item"
                         size="small"
                         filterable
                         v-model="{{ spec.parameter_name }}"
                         clearable
                         placeholder="{{ spec.title }}">
                {% for option in spec.lookup_choices %}
                  <el-option label="{{ option.1 }}" value="{{ option.0 }}"></el-option>
                {% endfor %}
              </el-select>
              <input type="hidden" v-model="{{ spec.parameter_name }}" name="{{ spec.parameter_name }}"/>
            {% else %}
              <el-col :span="4">
                <el-select class="simpleui-form-item"
                           size="small"
                           filterable
                           v-model="{{ spec.lookup_kwarg }}"
                           clearable
                           placeholder="{{ spec.title }}">
                  {% if spec|get_date_type == 'time' %}
                    {% for option in spec.lookup_choices %}
                      <el-option label="{{ option }}" value="{{ option|to_str }}"></el-option>
                    {% endfor %}
                  {% elif spec.lookup_choices %}
                    {% if spec.lookup_choices.query %}
                      {% for option in spec.lookup_choices %}
                        <el-option label="{{ option }}" value="{{ option }}"></el-option>
                      {% endfor %}
                    {% else %}
                      {% for option in spec.lookup_choices %}
                        <el-option label="{{ option.1 }}" value="{{ option.0 }}"></el-option>
                      {% endfor %}
                    {% endif %}
                  {% elif spec.field.choices %}
                    {% for option in spec.field.choices %}
                      <el-option label="{{ option.1 }}" value="{{ option.0 }}"></el-option>
                    {% endfor %}
                  {% else %}
                    <el-option label="是" value="True"></el-option>
                    <el-option label="否" value="False"></el-option>
                  {% endif %}
                </el-select>
              </el-col>
              <input type="hidden" v-model="{{ spec.lookup_kwarg }}" name="{{ spec.lookup_kwarg }}"/>
            {% endif %}
          {% endfor %}
        {% endif %}

        <el-col :span="4">
          <el-button class="simpleui-form-item"
                     style="float: left; width: auto;"
                     type="primary"
                     icon="el-icon-search"
                     size="mini"
                     @click="formSubmit()">
            {% trans 'Search' %}
          </el-button>
          {% if show_result_count %}
            <div class="quiet">
              {% blocktrans count counter=cl.result_count %} {{ counter }} result {% plural %} {{ counter }} results {% endblocktrans %}
              (<a href="?{% if cl.is_popup %}_popup=1{% endif %}">
                {% if cl.show_full_result_count %}
                  {% blocktrans with full_result_count=cl.full_result_count %}
                    {{ full_result_count }} total
                  {% endblocktrans %}
                {% else %}
                  {% trans "Show all" %}
                {% endif %}
              </a>)
            </div>
          {% endif %}
        </el-col>



        {% for pair in cl.params.items %}
          {% if pair.0 != search_var %}
            {% if pair.0.0 == '_' or pair.0 == 'o'%}
              <input type="hidden" name="{{ pair.0 }}" value="{{ pair.1 }}"/>
            {% else %}
              <input type="hidden" class="form-params" data-name="{{ pair.0 }}" value="{{ pair.1 }}"/>
            {% endif %}
          {% endif %}
        {% endfor %}
      </el-row>
    </form>
  </div>

  <script type="text/javascript">
      window.getTranslate = function (key) {
          if (!window.Lanuages) {
              return "";
          }
          let val = Lanuages[key];
          if (!val || val === "") {
              val = key;
          }
          return val
      };
      Date.prototype.format = function (fmt) {
          const o = {
              "M+": this.getMonth() + 1,                 //月份
              "d+": this.getDate(),                    //日
              "h+": this.getHours(),                   //小时
              "m+": this.getMinutes(),                 //分
              "s+": this.getSeconds(),                 //秒
              "q+": Math.floor((this.getMonth() + 3) / 3), //季度
              "S": this.getMilliseconds()             //毫秒
          };
          if (/(y+)/.test(fmt))
              fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
          for (var k in o)
              if (new RegExp("(" + k + ")").test(fmt))
                  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
          return fmt;
      };
      const searchApp = new Vue({
          el: '#toolbar',
          data: {
              placeholder: '{% trans 'Search' %}{% autoescape off %}{% search_placeholder %}'{% endautoescape %},
              searchInput: '{{ cl.query }}',
              {% if cl.has_filters %}
                  {% for spec in cl.filter_specs %}
                      {% if spec.links %}
                          '{{ spec.field_path }}': '',
                          '{{ spec.field_generic }}gte': '',
                          '{{ spec.field_generic }}lt': '',
                      {% elif spec|has_filter %}
                          '{{ spec.parameter_name }}':'',
                      {% else %}
                          '{{ spec.lookup_kwarg }}': '',
                      {% endif %}
                  {% endfor %}
              {% endif %}
          },
          created: function () {
              var self = this;
              var date_field = [];
              {% if cl.has_filters %}
                  {% for spec in cl.filter_specs %}
                      {% if spec.links %}
                          date_field.push('{{ spec.field_path }}')
                      {% endif %}
                  {% endfor %}
              {% endif %}
              $('.form-params').each(function () {
                  var key = $(this).attr('data-name');
                  var value = $(this).val();
                  self[key] = value;
              });
              try {
                  date_field.forEach(key => {
                      var start = self[key + "__gte"];
                      var end = self[key + "__lt"];
                      self[key] = [start, end];
                  });
              } catch (e) {
                  console.warn('日期值回显失败，也许是django版本问题，请至github报告此问题：https://github.com/newpanjing/simpleui/issues');
              }
          },
          watch: {
              {% if cl.has_filters %}
                  {% for spec in cl.filter_specs %}
                      {% if spec.links %}
                          '{{ spec.field_path }}': function (newValue, oldValue) {
                              var type = '{{ spec | get_date_type }}'
                              try {
                                  if (newValue) {
                                      if (newValue[0] != "" && newValue[1] != "") {

                                          if (type == 'date') {
                                              this['{{ spec.field_generic }}gte'] = newValue[0].format('yyyy-MM-dd');
                                              this['{{ spec.field_generic }}lt'] = newValue[1].format('yyyy-MM-dd');
                                          } else if (type == 'datetime') {
                                              this['{{ spec.field_generic }}gte'] = newValue[0].format('yyyy-MM-dd hh:mm:ss+08:00');
                                              this['{{ spec.field_generic }}lt'] = newValue[1].format('yyyy-MM-dd hh:mm:ss+08:00');
                                          }
                                      }
                                  } else {
                                      if (type == 'date') {
                                          this['{{ spec.field_generic }}gte'] = '';
                                          this['{{ spec.field_generic }}lt'] = '';
                                      } else if (type == 'datetime') {
                                          this['{{ spec.field_generic }}gte'] = '';
                                          this['{{ spec.field_generic }}lt'] = '';
                                      }
                                  }
                              } catch (e) {
                                  //
                              }
                              {#console.log(newValue)#}
                              {#console.log(oldValue)#}
                          },
                      {% endif %}
                  {% endfor %}
              {% endif %}
          },
          methods: {

              changeDate: function (d1, d2) {
                  console.log(arguments)
              },
              changeDatetime: function (d1, d2) {
                  console.log(arguments)
              },
              formSubmit: function () {
                  preSubmit();
                  document.getElementById('changelist-search').submit();
              }
          }
      })

</script>
{% else %}
  <form id="changelist-search" method="get">
      <input type="hidden" name="p" value=""/>
  </form>
{% endif %}
